import React, { Component } from 'react';
import { Button, message } from 'antd';
/**
 * state用法
 */
class StateToProps extends Component {

    // state:存放本页面（组件）的状态值
    // this.setState() 改变原来的状态值
    // setState:有两个参数，1、在第一个参数里：可以设置要改变状态值
    // 第二个参数：是一个函数
    // setState本身相当于一个异步函数（通俗理解，就是它的执行优先升级最低）
    state = {
        key: 0
    }

    // 增加
    handleIn = () => {
        const { key } = this.state;

        this.setState({
            key: key + 1,
        }, () => {
            const { key } = this.state;
            console.log(key);
        });

    }

    // 减少
    handleOut = () => {
        const { key } = this.state;
        if (key <= 0) {
            message.info('数字最小为0');
            return;
        } else {
            this.setState({
                key: key - 1,
            });
        }
    }

    render() {
        const { key } = this.state;

        return (
            <div>
                <span>{key}</span>
                <br />
                <span><Button onClick={this.handleIn}>+</Button></span>
                <span><Button onClick={this.handleOut}>-</Button></span>
            </div>
        );
    }
}

export default StateToProps;